<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分组管理</title>
</head>
<body>
{extend name="extends/usercenter" /}
<div>
    {block name="left"}
    <script src="/static/zTree/js/jquery.ztree.core.js"></script>
    <link rel="stylesheet" href="/static/zTree/css/zTreeStyle/zTreeStyle.css">
    <div id="api-list">
        <div onclick="quanbujiazai()">
            全部加载!...
        </div>
        <ul id="treeDemo" class="ztree"></ul>
    </div>
    {/block}

    {block name="content"}

    <div id="api-demo-content">
        <iframe name="api-demo-iframe" width="100%" height="700px">

        </iframe>
    </div>

    <script >

        function quanbujiazai(){

            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            if (asyncForAll) {

                zTree.expandAll(true);
            }else{
                expandNodes(zTree.getNodes());
                asyncForAll=true;

            }

        }

        function expandNodes(nodes) {
            if (!nodes) return;
            curStatus = "expand";
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            for (var i=0, l=nodes.length; i<l; i++) {
                zTree.expandNode(nodes[i], true, false, false);
                if (nodes[i].isParent && nodes[i].zAsync) {
                    expandNodes(nodes[i].children);
                } else {
                    goAsync = true;
                }
            }
        }


            asyncForAll=false;
         $group_list=JSON.parse('{:json_encode($group_list["list"])}')
        var zTreeObj;//托管对象
        // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
        var setting = {
            callback: {
                onClick: zTreeOnClick
            },
            async: {
                enable: true,
                url: "{:url('index/api_demo/loadcate')}",
                autoParam: ["group_id",'cate_id'],
                dataType:'json',
                type: "get",
                dataFilter: ajaxDataFilter
            }

        };
         /**
          * 处理ajax 的请求
          * @param treeId
          * @param parentNode
          * @param responseData
          * @returns {Array}
          */
        function ajaxDataFilter(treeId, parentNode, responseData){
            console.log('ajaxDataFilter',arguments);
            var jsonmm=responseData.cate;
            var node_c=[];
            for(var li70 in jsonmm){
                node_c.push({
                    type:'cate',
                    pId:jsonmm[li70].pid,
                    name:jsonmm[li70].name,

                    isParent:true,
                    group_id:jsonmm[li70].group_id,
                    cate_id:jsonmm[li70].id,

                })
            }
             jsonmm=responseData.api;

             for(var li70 in jsonmm){
                 node_c.push({
                     type:'cate',
                     pId:jsonmm[li70].pid,
                     name:jsonmm[li70].name,
                     url:'/index.php/index/api_demo/demo/api_id/'+jsonmm[li70].id,
                     target:"api-demo-iframe",

                     group_id:jsonmm[li70].group_id,
                     cate_id:jsonmm[li70].id,

                 })
             }

            return  node_c;
        }


        // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）

        var zNodes = [      ];
         for(var li in $group_list ){
             zNodes.push(
                 { id:$group_list[li].id+'group',
                     name:$group_list[li].name,
                     level:1,
                     group_id:$group_list[li].id,
                     cate_id:0,
                     type:'group',
                     open:true,
                     isParent:true,
                     children:[]
                 });
         }
        function zTreeOnClick(event, treeId, treeNode) {
             console.log('zTreeOnClick');
        };

        $(document).ready(function(){
            zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });
    </script>
    {/block}
</div>
</body>
</html>
